<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>inputEx - SelectField Usage</title>

<!-- YUI CSS -->
<link rel="stylesheet" type="text/css" href="../lib/yui/reset-fonts/reset-fonts.css">
<link rel="stylesheet" type="text/css" href="../lib/yui/container/assets/container.css"> 
<link rel="stylesheet" type="text/css" href="../lib/yui/assets/skins/sam/skin.css">

<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='../css/inputEx.css' />

<!-- Demo CSS -->
<link rel="stylesheet" type="text/css" href="css/demo.css"/>
<link rel="stylesheet" type="text/css" href="css/dpSyntaxHighlighter.css">

 </head>

 <body>

<h1>inputEx - SelectField Usage</h1>


<!-- Example 1 -->
<div class='exampleDiv'>
	<h2>Basic SelectField creation</h2>
	<p>Use the following code to create a basic inputEx SelectField.</p>
	<div class='demoContainer' id='container1'></div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript">
			new inputEx.SelectField({
				name: 'country',
				choices: [                                  // choices: [                      <- alternative syntax (shorter)
					{ value: 'United States of America' },  //    'United States of America',  <-
					{ value: 'France' }                     //    'France'                     <-
				],                                          // ],                              <-
				parentEl: 'container1'
			});
		</textarea>
	</div>
</div>

<!-- Example 1bis -->
<div class='exampleDiv'>
	<h2>Differentiate choices' labels and values</h2>
	<p>Use the following code to create choices with labels different from values</p>
	<div class='demoContainer' id='container1bis'></div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript">
			new inputEx.SelectField({
				label: 'Where are you from ?',
				name: 'country',
				choices: [                                                // no alternative syntax
					{ value: 'us', label: 'United States of America' },
					{ value: 'fr', label: 'France' }
				],
				parentEl: 'container1bis'
			});
		</textarea>
	</div>
</div>


<!-- Example 2 -->
<div class='exampleDiv'>
	<h2>Updated event</h2>
	<p>How to listen to the updated event :</p>
	<div class='demoContainer' id='container2'></div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript">
		var el = YAHOO.util.Dom.get('container2');
		var field2 = new inputEx.SelectField({ name: 'country', label: 'Where are you from ?', choices: [{ value: 'us', label: 'United States of America' }, { value: 'fr', label: 'France' }], parentEl: el });
		
		var button = inputEx.cn('button', null, null, "SetValue with 'us'");
		var val = 'us';
		el.appendChild(button);
		YAHOO.util.Event.addListener(button, "click" ,function() {
		   field2.setValue(val);
		   val = (val == 'fr') ? 'us' : 'fr';
		   button.innerHTML = "SetValue with '"+val+"'";
		});

		var logDiv = inputEx.cn('div', null, null, "Log :");
		el.appendChild(logDiv);
		field2.updatedEvt.subscribe(function(e,params) {
			var value = params[0];
			logDiv.innerHTML += "Updated at "+(new Date())+" with value "+value;
			logDiv.appendChild(inputEx.cn('br'));
		});
		</textarea>
	</div>
</div>


<!-- Example 3 -->
<div class='exampleDiv'>
	<h2>addChoice</h2>
	<p>Add choices dynamically</p>
	<div class='demoContainer' id='container3'></div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript">
         	var el = YAHOO.util.Dom.get('container3');
			var field3 = new inputEx.SelectField({name: 'country', choices: [{ value: 'United States of America' }, { value: 'France' }], parentEl: el});

			var button1 = inputEx.cn('button', null, null, "Add 'Spain' choice (and select 'Spain')");
			YAHOO.util.Event.addListener(button1, "click" ,function() {
			   field3.addChoice({value:"Spain",selected:true});
			   button1.disabled = true;
			});

			var button2 = inputEx.cn('button', null, null, "Add 'United Kingdom' choice (value : 'uk'), in position 1");
			YAHOO.util.Event.addListener(button2, "click" ,function() {
			   field3.addChoice({value:"uk",label:"United Kingdom",position:1});
			   button2.disabled = true;
			});

			var button3 = inputEx.cn('button', null, null, "Add 'Sweden' choice after 'France' choice");
			YAHOO.util.Event.addListener(button3, "click" ,function() {
			   field3.addChoice({value:"Sweden",after:"France"});
			   button3.disabled = true;
			});

			el.appendChild(button1);
			el.appendChild(button2);
			el.appendChild(button3);

			var logDiv3 = inputEx.cn('div', null, null, "Log : ");
			el.appendChild(logDiv3);
			field3.updatedEvt.subscribe(function(e,params) {
				var value = params[0];
				logDiv3.innerHTML += "Updated at "+(new Date())+" with value "+value;
				logDiv3.appendChild(inputEx.cn('br'));
			});
		</textarea>
	</div>
</div>

<!-- Example 4 -->
<div class='exampleDiv'>
	<h2>removeChoice</h2>
	<p>Remove choices dynamically</p>
	<div class='demoContainer' id='container4'></div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript">
			var el = YAHOO.util.Dom.get('container4');
			var field4 = new inputEx.SelectField({
				name: 'country',
				choices: [
					{ value: 'usa', label: 'United States of America' },
					{ value: 'de', label: 'Germany' },
					{ value: 'uk', label: 'United Kingdom' },
					{ value: 'fr', label: 'France' },
					{ value: 'se', label: 'Sweden' },
					{ value: 'es', label: 'Spain' }
				],
			   parentEl: el
			});
			
			var button4 = inputEx.cn('button', null, null, "Remove 'Spain' choice (by label)");
			YAHOO.util.Event.addListener(button4, "click" ,function() {
			   field4.removeChoice({label:"Spain"});
			   button4.disabled = true;
			});

			var button5 = inputEx.cn('button', null, null, "Remove 'United Kingdom' choice (by value)");
			YAHOO.util.Event.addListener(button5, "click" ,function() {
			   field4.removeChoice({value:"uk"});
			   button5.disabled = true;
			});

			var button6 = inputEx.cn('button', null, null, "Remove 'Germany' choice (by position)");
			YAHOO.util.Event.addListener(button6, "click" ,function() {
			   field4.removeChoice({position:1});
			   button6.disabled = true;
			});

			el.appendChild(button4);
			el.appendChild(button5);
			el.appendChild(button6);

			var logDiv4 = inputEx.cn('div', null, null, "Log : ");
			el.appendChild(logDiv4);
			field4.updatedEvt.subscribe(function(e,params) {
				var value = params[0];
				logDiv4.innerHTML += "Updated at "+(new Date())+" with value "+value;
				logDiv4.appendChild(inputEx.cn('br'));
			});
		</textarea>
	</div>
</div>

<!-- Example 5 -->
<div class='exampleDiv'>
	<h2>Hide / Show / Disable / Enable choice</h2>
	<p>Hide, show, disable or enable an choice in the selector, without removing it totally, and keeping the original choice's order</p>
	<p style="font-size:90%;padding-top:3px;">Note : disableChoice and enableChoice methods have no effect with IE &lt; 8 because it did not support disabled="disabled" attribute.</p>
	<div class='demoContainer' id='container5'></div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript">
		var el = YAHOO.util.Dom.get('container5');
		var field5 = new inputEx.SelectField({name: 'country', choices: [ { value: 'usa', label: 'United States of America' }, { value: 'fr', label: 'France' }, { value: 'es', label: 'Spain' }], parentEl: el});
		
		var button7 = inputEx.cn('button', null, null, "Hide choice 'France'");
		el.appendChild(button7);
		var button8 = inputEx.cn('button', null, null, "Show choice 'France'");
		el.appendChild(button8);
		var button9= inputEx.cn('button', null, null, "Disable choice 'Spain'");
		el.appendChild(button9);
		var button10 = inputEx.cn('button', null, null, "Enable choice 'Spain'");
		el.appendChild(button10);
		
		var logDiv5 = inputEx.cn('div', null, null, "Log :");
		el.appendChild(logDiv5);
		field5.updatedEvt.subscribe(function(e,params) {
			var value = params[0];
			logDiv5.innerHTML += "Updated at "+(new Date())+" with value "+value;
			logDiv5.appendChild(inputEx.cn('br'));
		});
		
		
		YAHOO.util.Event.addListener(button7, "click" ,function() {
			
			field5.hideChoice({value:'fr'});
			
			logDiv5.innerHTML += "[INFO] Hide choice 'France' (current value : "+field5.getValue()+")";
			logDiv5.appendChild(inputEx.cn('br'));
		});
		
		YAHOO.util.Event.addListener(button8, "click" ,function() {
			
			field5.showChoice({value:'fr'});
			
			logDiv5.innerHTML += "[INFO] Show choice 'France' (current value : "+field5.getValue()+")";
			logDiv5.appendChild(inputEx.cn('br'));
		});
		
		YAHOO.util.Event.addListener(button9, "click" ,function() {
			
			field5.disableChoice({label:'Spain'});
			
			logDiv5.innerHTML += "[INFO] Disable choice 'Spain' (current value : "+field5.getValue()+")";
			logDiv5.appendChild(inputEx.cn('br'));
		});
		
		YAHOO.util.Event.addListener(button10, "click" ,function() {
			
			field5.enableChoice({label:'Spain'});
			
			logDiv5.innerHTML += "[INFO] Enable choice 'Spain' (current value : "+field5.getValue()+")";
			logDiv5.appendChild(inputEx.cn('br'));
		});
		
		</textarea>
	</div>
</div>

<!-- YUI Library -->
<script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script> 

<!-- InputEx -->
<script src="../js/inputex.js"  type='text/javascript'></script>
<script src="../js/Field.js"  type='text/javascript'></script>
<script src="../js/fields/StringField.js"  type='text/javascript'></script>
<script src="../js/mixins/choice.js"  type='text/javascript'></script>
<script src="../js/fields/SelectField.js"  type='text/javascript'></script>

<!-- inputEx examples -->
<script src="js/dpSyntaxHighlighter.js"></script>
<script src="inputex-examples.js"></script>

 </body>
</html>